<template>
	<view class="content">
		<view class="statistics-box">
			<view class="statistics-top flexWrap">
				<view class="title-box flexWrapNo" @tap="showDate()">
					<text class="title">月统计</text>
					<view class="picker-box flexWrapNo">
						{{monthTime}}
						<image src="../../static/index/calendar.png" class="calendar-icon"></image>
					</view>
				</view>
				<image src="../../static/index/calendar-img.png" class="calendar-img"></image>
			</view>
			<view class="statistics-cont flexWrap">
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthData.order_count||'0'}}</text>
						<block v-if="Number(mouthData.order_count)!=Number(lastMouthData.order_count)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(mouthData.order_count)>Number(lastMouthData.order_count)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">本月订单</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthData.tatal_income||'0'}}</text>
						<block v-if="Number(mouthData.tatal_income)!=Number(lastMouthData.tatal_income)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(mouthData.tatal_income)>Number(lastMouthData.tatal_income)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">本月流水</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthData.quantity||'0'}}</text>
						<block v-if="Number(mouthData.quantity)!=Number(lastMouthData.quantity)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(mouthData.quantity)>Number(lastMouthData.quantity)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">本月时长</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{mouthData.total_number_consumers||'0'}}</text>
						<block v-if="Number(mouthData.total_number_consumers)!=Number(lastMouthData.total_number_consumers)">
							<image src="../../static/index/higher-icon.png" class="trend-icon" v-if="Number(mouthData.total_number_consumers)>Number(lastMouthData.total_number_consumers)"></image>
							<image src="../../static/index/low-icon.png" class="trend-icon" v-else></image>
						</block>
					</view>
					<view class="statistics-text">本月人数</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{lastMouthData.order_count||'0'}}</text>
					</view>
					<view class="statistics-text">上月订单</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{lastMouthData.tatal_income||'0'}}</text>
					</view>
					<view class="statistics-text">上月流水</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{lastMouthData.quantity||'0'}}</text>
					</view>
					<view class="statistics-text">上月时长</view>
				</view>
				<view class="statistics-item flexWarpCenterColumn">
					<view class="flexWrapNo">
						<text>{{lastMouthData.total_number_consumers||'0'}}</text>
					</view>
					<view class="statistics-text">上月人数</view>
				</view>
			</view>
			<view class="statistics-bottom flexWrap">
				<view class="statistics-item flexWarpColumn">
					<text>{{historyMouthData.tatal_income||'--'}}</text>
					<view class="statistics-text">历史最高流水 <text class="date">{{historyMouthData.month||'--'}}</text></view>
				</view>
				<view class="statistics-item flexWarpColumn">
					<text>{{translateMouthData.tatal_income||'--'}}</text>
					<view class="statistics-text">累计销售额(截止{{translateMouthData.month||'--'}})</view>
				</view>
			</view>
		</view>
		<view class="charts-box">
			<view class="charts-title">月收入占比</view>
			<qiun-data-charts type="ring" :opts="chartsSet" :chartData="chartData" :errorShow="true"/>
		</view>
		<view class="charts-box">
			<view class="charts-title">日流水曲线</view>
			<qiun-data-charts type="line" :opts="lineSet" :chartData="lineData" :inScrollView="true"/>
		</view>
		<view class="charts-box">
			<view class="charts-title">日历流水</view>
			<!-- :showHead="false" slideSwitchMode="none" -->
			<wu-calendar @monthSwitch="getDate" :date="monthTime" :selected="selectedList"
				:showSelect="false" :useToday="false"  :showMonth="false" color="#26bcfd00"
				:monthShowCurrentMonth="true" :showHead="false" slideSwitchMode="none"></wu-calendar>
		</view>
		<view class="rank-box">
			<view class="rank-top flexWrap">
				<view class="left-box flexWarpColumn">
					<view class="title">会员消费榜</view>
					<view>Top10</view>
				</view>
				<image src="../../static/index/rank-img.png" class="rank-img"></image>
			</view>
			<view class="rank-cont">
				<view class="rank-item flexWrap" v-for="(item,index) in userList" :key="index">
					<view class="item-left flexWrapNo">
						<text class="rank-num" :class="{yellow:index==0,red:index==1,blue:index==2}">{{Number(index+1)}}</text>
						<image :src="item.avatar" class="advert"></image>
						<text class="nickname">{{item.nickname}}</text>
					</view>
					<view class="item-right flexWrapNo">
						¥ {{item.total_money}}/ {{item.quantity}}h
					</view>
				</view>
				<view class="empty-box" v-if="userList.length==0">
					<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
				</view>
			</view>
		</view>
		<view class="date-boxs" v-if="dateFlag">
			<view class="date-title">时间筛选</view>
			<view class="date-cont flexWrap">
				<view class="screen-item flexWrap">
					<picker mode="date" :value="monthTime" @change="bindDateChange" :end="date" :fields="fields">
						<view class="select-input">{{monthTime}}</view>
					</picker>
					<text class="triangle"></text>
				</view>
			</view>
			<view class="determine-btn flexWrapNo">
				<view class="determine" @tap="submit()">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate('start', 'month')
			const currentMonth = this.getDate('start', 'month')
			return {
				chartData: {
					"series": [{
						"data": []
					}]
				},
				chartsSet: {
					dataLabel: false,
					title: {
						name: "",
					},
					subtitle: {
						name: ""
					},
					legend: {
						position: "bottom"
					},
					color: ["#2CA522", "#FFB726", "#26BCFD", "#FF4646"],
					extra: {
						ring: {
							centerColor: "#1D1C5C", //353484
							borderColor: "#1D1C5C",
							borderWidth: 1
						}
					}
				},
				lineData: {
					categories: [],
					series: [{
						name: "",
						data: []
					}]
				},
				lineSet: {
					dataLabel: false,
					dataPointShape: false,
					yAxis: {
						gridType: "solid",
						gridColor: "#74739B",
						fontSize:10,
						data:[
							{
								fontSize:10
							}
						]
					},
					xAxis: {
						fontColor: "#74739B",
						labelCount:15,
						fontSize:10
					},
					color: ["#5BB9F7"],
					fontColor: "#74739B",
					legend: {
						show: false
					}
				},
				selected: [],
				monthTime: currentMonth,
				month: "",
				year: "",
				selectedList: [],
				monthTime: currentMonth,
				dateFlag: false,
				date: currentDate,
				fields: 'month',
				historyMouthData:{},
				translateMouthData:{},
				mouthData:{},
				lastMouthData:{},
				colorArr:['','rgba(38, 188, 253, 0)','rgba(38, 188, 253, .1)','rgba(38, 188, 253, .2)','rgba(38, 188, 253, .3)','rgba(38, 188, 253, .4)','rgba(38, 188, 253, .5)','rgba(38, 188, 253, .6)','rgba(38, 188, 253, .7)','rgba(38, 188, 253, .8)','rgba(38, 188, 253, .9)','rgba(38, 188, 253,1)'],
				userList:[],
				store_id:""
			};
		},
		onLoad(ops) {
			this.store_id=ops.store_id||uni.getStorageSync('store_id')
			this.getData();
		},
		methods: {
			// 提交
			submit() {
				this.getData();
				this.closeDate();
			},
			showDate() {
				this.dateFlag = !this.dateFlag
			},
			closeDate() {
				this.dateFlag = false
			},
			// 获取时间
			getDate(type, fields) {
				const date = new Date();
				date.setDate(date.getDate() - 1);
				if (type == 'start' && fields == 'day') { //粒度为天
					date.setDate(date.getDate() - 6);
				}
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type == 'start' && fields == 'year') { //粒度为年
					if (year != 2022) {
						year = year - 1
					}
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				let result = ``
				if (fields == 'month') {
					month = month - 1
					result = `${year}-${month}`
				} else if (fields == 'year') {
					result = `${year}`
				} else {
					result = `${year}-${month}-${day}`
				}
				return result;
			},
			// 选择时间
			bindDateChange(e) {
				console.log(e.target.value)
				this.monthTime = e.target.value
			},
			getData() {
				this.$request.post(this.$api.mouthReport, {
					store_id:this.store_id,
					start_mouth_time: this.monthTime,
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.historyMouthData=data.history_mouth_data
						this.translateMouthData=data.translate_mouth_data
						this.mouthData=data.mouth_data
						this.lastMouthData=data.last_mouth_data
						this.chartData.series[0].data = data.rate_data
						data.month_datalist.forEach(item=>{
							this.lineData.categories.push(item.report_day)
							this.lineData.series[0].data.push(item.tatal_income)
							let selectItem={
								date:item.report_date,
								backgroundColor:this.colorArr[item.amount_level],
								disable: true,
								info:item.tatal_income,
								infoColor: '#fff',
							}
							this.selectedList.push(selectItem)
						})
						this.userList=data.user_top_list
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 36upx;
	}

	.triangle {
		border-top-color: #FFFFFF;
	}

	.statistics-box {
		background: #1D1C5C;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 20upx;

		.statistics-top {
			height: 120rpx;
			padding-left: 20upx;

			.title-box {
				.title {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}

				.picker-box {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #8E8EAE;
					margin-left: 24upx;

					.calendar-icon {
						width: 28upx;
						height: 28upx;
						margin-left: 16upx;
					}
				}
			}

			.calendar-img {
				width: 160upx;
				height: 156upx;
			}
		}

		.statistics-cont {
			padding: 12upx;
			padding-bottom: 0;
			flex-wrap: wrap;

			.statistics-item {
				width: 158rpx;
				height: 152rpx;
				background: #353484;
				border-radius: 8rpx;
				justify-content: center;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 12upx;
				.trend-icon {
					width: 12upx;
					height: 32upx;
					margin-left: 6upx;
				}

				.statistics-text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #9898C1;
					margin-top: 12upx;
				}
			}
		}

		.statistics-bottom {
			padding: 0 12upx;
			padding-bottom: 12upx;

			.statistics-item {
				height: 152rpx;
				background: #353484;
				border-radius: 8rpx;
				justify-content: center;
				flex: 1;
				padding: 0 20upx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;

				&:nth-of-type(1) {
					margin-right: 8upx;
				}

				.statistics-text {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #9A9AC2;
					margin-top: 14upx;

					.date {
						margin-left: 14upx;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.charts-box {
		background: #1D1C5C;
		border-radius: 16rpx;
		padding: 32upx 26upx;
		margin-bottom: 20upx;

		.charts-title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}
	}

	.rank-box {
		background: #1D1C5C;
		border-radius: 16rpx;
		overflow: hidden;

		.rank-top {
			background: linear-gradient(180deg, rgba(244, 157, 94, .6) 0%, rgba(187, 104, 134, 0.3) 49%, rgba(127, 49, 175, 0) 100%);
			padding: 0 26upx;

			.left-box {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #A499B2;

				.title {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					margin-bottom: 6upx;
				}
			}

			.rank-img {
				width: 160upx;
				height: 160upx;
			}
		}

		.rank-cont {
			padding: 12upx;

			.rank-item {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding: 26upx 16upx 30upx 28upx;
				background: #353484;
				border-radius: 8rpx;
				margin-bottom: 4upx;

				.item-left {
					.rank-num {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						margin-right: 20upx;
					}

					.advert {
						width: 48upx;
						height: 48upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 12upx;
						border: 1upx solid #FFFFFF;
					}
					.nickname{
						width: 200upx;
						@include ellipsis(1);
					}
					.yellow {
						color: #FFB726;
					}

					.red {
						color: #FF4646;
					}

					.blue {
						color: #26BCFD;
					}
				}

				.item-right {
					.trend-icon {
						width: 12upx;
						height: 32upx;
						margin-left: 8upx;
					}
				}
			}
		}
	}

	.date-boxs {
		padding: 30rpx;
		z-index: 999;
		border-bottom: 1rpx solid rgba(71, 73, 84, .5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #040336;

		.date-title {
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
			margin-bottom: 26rpx;
		}

		.date-cont {
			.screen-item {
				width: 400rpx;
				height: 66rpx;
				line-height: 66rpx;
				text-align: center;
				border: 1rpx solid #26BCFD;
				color: #323232;
				font-size: 28rpx;
				border-radius: 6rpx;
				padding: 0 30rpx;
				margin: auto;

				.select-input {
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: 400;
					color: #26BCFD;
				}

				picker {
					width: 100%;
					text-align: left;
				}
			}
		}

		.determine-btn {
			margin-top: 40rpx;
			justify-content: center;

			view {
				width: 230rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #26BCFD;
				border: 1rpx solid #26BCFD;
				border-radius: 20rpx;
				margin-right: 30upx;
			}

			.determine {
				background: #26BCFD;
				color: #FFFFFF;
				border: none;
			}
		}
	}
</style>